<template>
  <a-spin :spinning="loading" class="h-100%">
    <div class="detail-info">
      <h4>任务详情</h4>
      <div class="params-info">
        <div class="label">清洗方式</div>
        <div class="params">
          <div class="h-36 flex flex-items-center gap-8 mb-8">
            <label-classification v-if="cleaningMode?.mode === 1 || cleaningMode?.mode === 4" :label-list="cleaningMode.similarityLabels" />
            <label-classification
              v-if="cleaningMode?.mode === 2 || cleaningMode?.mode === 4"
              :label-list="cleaningMode.definitionLabels"
              :label-options-style="{ color: '#D61860', background: '#d6186014' }"
            />
          </div>
          <ul v-if="cleaningMode?.optionList.length" class="selectable-params-wrap">
            <li v-for="item in cleaningMode?.optionList" :key="item">{{ item }}</li>
          </ul>
        </div>
      </div>
      <div class="params-info flex-items-center">
        <div class="label">清洗数据量</div>
        <div class="value">{{ detailData?.status === 1 || detailData?.status === 2 ? '-' : detailData?.fileCount || 0 }}</div>
      </div>
      <div class="data-set-list-wrap">
        <header>
          清洗数据集
          <span>（文件夹{{ chooseDataVO?.dirCount || 0 }}，文件{{ chooseDataVO?.fileCount || 0 }}）</span>
        </header>
        <ul class="data-set-list my-scrollbar">
          <li v-for="item in chooseDataVO?.chooseData" :key="item?.fileName">
            <i v-if="item?.fileType === 0" class="iconfont icon-folder-3-line"></i>
            <i v-else class="iconfont icon-file-line"></i>
            <p :title="item?.fileName">{{ item?.fileName }}</p>
          </li>
        </ul>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  import { radioOptions } from '../options'

  export interface DetailInfoProps {
    loading: boolean
    detailData: any
  }

  const props = withDefaults(defineProps<DetailInfoProps>(), {
    loading: false,
    detailData: () => {}
  })

  /* 数据列表 */
  const chooseDataVO = computed(() => {
    return props.detailData?.chooseDataVO
  })

  /* 清洗方式 */
  const cleaningMode = computed(() => {
    const mode = props.detailData?.scheme
    const similarity = props.detailData?.config?.approximate?.similarity
    const similarityLabel = (radioOptions?.find((item: any) => item.value === similarity) as any)?.label
    const similarityLabels = [{ labelId: '1', labelName: `匹配模式：${similarityLabel}` }]
    const definition = props.detailData?.config?.definition?.definition
    const definitionLabels = [{ labelId: '1', labelName: `清晰度≥${definition}` }]
    const approximate = props.detailData?.config?.approximate
    let optionList = [
      approximate?.rotated && '查找旋转过的',
      approximate?.retroFleeted && '查找翻转过的',
      approximate?.sameSize && '相同尺寸',
      approximate?.sameAspectRatio && '相同长宽比'
    ]
    optionList = optionList.filter(item => item)

    return {
      mode,
      similarityLabels,
      definitionLabels,
      definition,
      optionList
    }
  })
</script>

<style lang="less" scoped>
  .detail-info {
    display: flex;
    padding: 24px;
    width: 360px;
    height: 662px;
    border-left: 1px solid #e8e8eb;
    flex-direction: column;

    > h4 {
      margin-bottom: 16px;
      font-size: 14px;
      color: rgba(16, 16, 20, 0.95);
      font-weight: 700;
      line-height: 22px;
    }

    .params-info {
      display: flex;
      margin-bottom: 12px;

      .label {
        display: flex;
        align-items: center;
        width: 80px;
        height: 36px;
        font-size: 14px;
        color: #333;
      }

      .value {
        font-size: 14px;
        color: rgba(25, 25, 48, 0.75);
        font-weight: 700;
        line-height: 22px;
      }

      .params {
        flex: 1;

        .selectable-params-wrap {
          position: relative;
          display: flex;
          padding: 8px 12px;
          margin-top: 10px;
          width: 100%;
          background: rgba(70, 134, 237, 0.04);
          border-radius: 6px;
          // background: url('../../../assets/img/union.png') no-repeat;
          // background-size: 100% 100%;
          flex-wrap: wrap;
          gap: 4px 18px;

          &::after {
            // 三角形
            content: '';
            position: absolute;
            top: -16px;
            left: 40px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-left: 8px solid transparent;
            border-bottom: 8px solid rgba(70, 134, 237, 0.04);
            border-right: 8px solid transparent;
          }

          > li {
            position: relative;
            font-size: 12px;
            color: rgba(17, 22, 31, 0.75);
            font-weight: 400;
            line-height: 20px;

            &::after {
              position: absolute;
              top: -1px;
              right: -9px;
              display: block;
              height: 14px;
              content: '|';
              color: rgba(17, 22, 31, 0.29);
            }

            &:last-child {
              &::after {
                display: none;
              }
            }
          }
        }
      }
    }

    .data-set-list-wrap {
      display: flex;
      overflow: hidden;
      border: 1px solid #e8e9eb;
      border-radius: 4px;
      flex: 1;
      flex-direction: column;

      > header {
        display: flex;
        align-items: center;
        padding: 0 16px;
        height: 44px;
        font-size: 14px;
        color: rgba(17, 22, 31, 0.75);
        background: #f5f5f5;
        border-bottom: 1px solid #f2f3f5;
        font-weight: 700;
        line-height: 22px;

        > span {
          font-size: 12px;
          color: rgba(25, 25, 48, 0.45);
          font-weight: 400;
          line-height: 20px;
        }
      }

      .data-set-list {
        overflow-y: auto;
        width: 100%;
        flex: 1;
        gap: 0 8px;
        flex-shrink: 0;

        > li {
          display: flex;
          align-items: center;
          padding: 0 12px;
          width: 100%;
          height: 40px;
          box-sizing: border-box;
          border-bottom: 1px solid #ebebeb;
          gap: 0 8px;

          &:last-child {
            border-bottom: none;
          }

          > p {
            height: 100%;
            line-height: 40px;
            .elliptical-1();
          }
        }
      }
    }
  }
</style>
